<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>八皇后游戏</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        html,body{
            width: 100%;
        }
        .grid{
            width: 65px;
            height: 65px;
            float: left;
            border: 1px solid #080808;
        }
    </style>
</head>
<body ng-app="game" ng-controller="game_controller">
    <div class="container">
        <div class="row operating_area" style="margin-top: 5%">
            <form class="form-inline" role="form">
                <div class="form-group">
                    <label for="size">棋盘大小</label>
                    <input style="margin-left: 20px;" type="text" ng-model="size" class="form-control" placeholder="请输入棋盘大小" >
                </div>
                <div class="form-group" style="margin-left: 20px;">
                    <input type="text" ng-model="size" class="form-control">
                </div>
                <div class="form-group" style="margin-left: 20px;">
                    <button type="button" class="btn btn-success" ng-click="init()">确定</button>
                    <button type="button" class="btn btn-success" ng-click="regret()" style="margin-left: 20px" ng-show="recordArr.length > 0">悔棋</button>
                    <button type="button" class="btn btn-success" ng-click="tips()" style="margin-left: 20px" ng-show="recordArr.length > 0">提示</button>
                </div>
            </form>
        </div>
        <div class="row">
            <div class="form-group" style="margin-left: 20px;">
                <p class="text-success">{{info}}</p>
            </div>
        </div>
        <div class="row" style="margin-top: 30px;width: 100%">
            <div ng-repeat="one in arr" style="width: 100%">
                <div class="grid" ng-repeat="item in one.list"
                     ng-style="{'background-color':(item.whiteColor ?'#fff':'#080808')}"
                     ng-click = "pieceClick($event,$parent.$index,$index)">
                    <img ng-show="item.havePiece" src="image/queen.png" style="width:65px;height:65px">
                </div>
            </div>
        </div>
    </div>

    <img src="http://inews.gtimg.com/newsapp_ls/0/3878029354_870492/0?tp=webp"/>
<script src="js/angular.min.js"></script>
<script>

    var app = angular.module('game', []);

    app.controller('game_controller', function($scope) {
        // 每个格子默认65*65;
        $scope.grid_width = 65;
        $scope.size = 10;
        $scope.arr = [];
        $scope.recordArr = [];
        $scope.pieceNum = 0;
        $scope.gameComplete = false;
        $scope.info = '';
        $scope.init = function () {
            if(isNaN($scope.size) || $scope.size < 4){
                alert("请输入大于4的整数");
                return ;
            }
            $scope.pieceNum = 0;
            $scope.arr = [];
            $scope.recordArr = [];
            $scope.info = '';
            $scope.gameComplete = false;
            for(var i=0;i<$scope.size;i++){
                var item = {
                    idx:i,
                    list:[]
                };
                $scope.arr.push(item);
                for(var j=0;j<$scope.size;j++){
                    var grid = {
                        idx:j,
                        whiteColor:false,
                        havePiece:false
                    };
                    if(i == 0 && j == 0){
                        grid.whiteColor = true;
                    }else{
                        if( j == 0){
                            grid.whiteColor = !$scope.arr[i-1].list[0].whiteColor
                        }else{
                            grid.whiteColor = !$scope.arr[i].list[j-1].whiteColor
                        }
                    }
                    $scope.arr[i].list.push(grid);

                }
            }
        };
        // 棋盘点击事件
        $scope.pieceClick = function (event,parent_index,index) {
            var havePiece = $scope.arr[parent_index].list[index].havePiece;
            // 判读当前格子是否已经有了棋子
            if(havePiece){
                var tempArr = $scope.recordArr.concat([]);
                var item = $scope.recordArr.pop();
                // 判读是否是上一步落的子
                if(item.x == parent_index && item.y == index){
                    // 撤销落子
                    $scope.arr[parent_index].list[index].havePiece = false;
                    $scope.info = '';
                    $scope.pieceNum--;
                    $scope.gameComplete = false;
                }else{
                    $scope.recordArr = tempArr;
                }
                // 什么也不做
                return ;
            }
            if($scope.gameComplete){
                alert("游戏已经完成");
                return ;
            }
            if(!$scope.check(parent_index,index)){
                alert("此处落子危险,游戏失败");
                return ;
            }

            $scope.arr[parent_index].list[index].havePiece = !havePiece;
            $scope.recordArr.push({x:parent_index,y:index});
            $scope.pieceNum++;
            // 检查是否还有可以落子的地方
            if(!$scope.search()){
                $scope.gameComplete = true;
            }
            return ;

        };
        // 检查是否可以落子
        $scope.check = function (x, y) {
            if($scope.pieceNum == 0){
                return true;
            }
            for(var i=0,length = $scope.recordArr.length;i<length;i++){
                var item = $scope.recordArr[i];
                if(item.x == x || item.y == y){

                    return false;
                }
                var ab = (item.y - y)/(item.x - x);

                if(ab == 1|| ab == -1){
                    return false;
                }
            }
            return true;
        };
        // 悔棋
        $scope.regret = function () {
            if($scope.recordArr.length == 0){
                return ;
            }
            var item = $scope.recordArr.pop();
            $scope.arr[item.x].list[item.y].havePiece = false;
            $scope.pieceNum--;
            $scope.gameComplete = false;
            $scope.info = '';
        };
        // 搜索是否还有可以落子的格子
        $scope.search = function () {
            var result = {};
            for(var i=0;i<$scope.size;i++){
                for(var j = 0;j<$scope.size;j++){
                    if($scope.check(i,j)){
                        result.x = i;
                        result.y = j;
                        return result;
                    }
                }
            }
            return null;
        };
        // 下棋提示
        $scope.tips = function () {
            if($scope.gameComplete){
                return ;
            }
            var result = $scope.search();
            $scope.info = "您可以走在第"+(result.x+1)+"行第"+(result.y+1)+"列";
        };
        // 监听游戏状态的完成
        $scope.$watch('gameComplete',function(newValue,oldValue, scope) {
            if(newValue == true){
                scope.info = "恭喜您,游戏成功";
                return ;
            }
        });

        // 初始化
        $scope.init();
    });
</script>
</body>
</html>